<template>
  <div class="wp-user">
    <div class="wp-user_form">
      <el-form  ref="userInfoForm" :model="userInfo" label-width="100px" class="wp-user_form" :rules="rules">
        <el-form-item label="头像" prop="avatar">
          <div class="wp-user_form__avatar">
            <el-avatar
              :size="60"
              :src="userInfo.avatar"
              @error="errorHandler">
              {{userInfo.employeeName?userInfo.employeeName.substring(1):''}}
            </el-avatar>
            <div class="change-avatar" @click="handleChangeAvatar">
              更换头像
            </div>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="employeeName">
              <el-input
                v-model="userInfo.employeeName"
                placeholder="姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input  v-model="userInfo.email" placeholder="邮箱" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="userInfo.mobile"
                placeholder="手机号"
                :maxlength="11"
                :minlength="11"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="userInfo.gender"
                placeholder="性别"
              >
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号">
              <el-input
                v-model="userInfo.loginAccount"
                disabled
                placeholder="登录账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工ID">
              <el-input
                disabled
                v-model="userInfo.employeeCode"
                placeholder="员工ID"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="部门">
              <!-- <el-tooltip class="item" effect="dark" :content="userInfo.mainDepartmentName" placement="bottom-start"> -->
              <el-input
                disabled
                v-model="userInfo.mainDepartmentName"
                placeholder="直属部门"
              ></el-input>
              <!-- </el-tooltip> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位">
             <el-tooltip class="item" effect="dark" :content="userInfo.positionNames" placement="bottom-start">
              <el-input
                disabled
                v-model="userInfo.positionNames"
                placeholder="职位"
              ></el-input>
             </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="直属上级">
              <el-input
                disabled
                v-model="userInfo.superiorName"
                placeholder="直属上级"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="企业微信ID">
              <el-input
                disabled
                v-model="userInfo.wxUserId"
                placeholder="企业微信ID"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
      <el-button type="success" @click.native="save" class="wp-user_btn">保存</el-button>
    <input
      id="inputFile"
      type="file"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      style="display: none"
      @change="uploadFile"
    />
    <edit-image
      v-if="showEditImage"
      :show="showEditImage"
      :file="editFile"
      :image="editImage"
      @save="submitImage"
      @close="showEditImage = false"
    />
  </div>
</template>

<script>
import { updateUserInfoAPI } from '@/api/user/userCenterAPI'
import system from '@/api/system'
import EditImage from '@/components/EditImage'
import store from '@/store'
export default {
  name: 'EditUserInfo',
  props: {
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  watch: {
    data: {
      handler (val) {
        this.userInfo = {...val}
      },
      deep: true,
      immediate: true
    }
  },
  components: { EditImage },
  data () {
    return {
      showEditImage: false,
      editFile: null,
      editImage: null,
      userInfo: {},
      rules: {
        employeeName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleChangeAvatar () {
      document.getElementById('inputFile').click()
    },
    uploadFile (event) {
      const files = event.target.files
      const file = files[0]
      const reader = new FileReader()
      const self = this
      reader.onload = function (e) {
        let result
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          result = e.target.result
        }
        self.editImage = result
        self.editFile = file
        self.showEditImage = true
        e.target.value = ''
      }
      reader.readAsDataURL(file)
    },
    submitImage (data) {
      this.loading = true
      const param = new FormData()
      this.userInfo.avatar = data.image
      param.append('userId', this.userInfo.employeeId)
      param.append('file', data.blob, data.file.name)
      system.uploadFileAPI(param)
        .then((res) => {
          this.loading = false
          this.userInfo.avatar = res.data.url
          this.$emit('change')
        })
        .catch(() => {
          this.loading = false
        })
    },
    save () {
      this.$refs.userInfoForm.validate(valide => {
        if (valide) {
          const params = {}
          params.employeeName = this.userInfo.employeeName
          params.mobile = this.userInfo.mobile
          params.gender = this.userInfo.gender
          params.email = this.userInfo.email
          params.avatar = this.userInfo.avatar
          updateUserInfoAPI(params).then(res => {
            const userInfo = store.getters.userInfo
            const d = {...userInfo, ...params}
            store.commit('user/SET_USERINFO', d)
            this.$emit('afterSave', res)
          })
        }
      })
    },
    errorHandler () {
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 20px;
}
.wp-user_form__avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
  .el-avatar {
    margin-right: 50px;
  }
}
.wp-user_btn{
  width: 200px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.change-avatar {
  font-size: 12px;
  line-height: 1;
  color: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  &:hover {
    background: #409eff;
    color: #fff;
  }
}
</style>
